<template>
    <u-popup :show="showSelectMachinePopup" :title="title" :round="10" :closeOnClickOverlay="closeOnClickOverlay" @close="onSelectMachinePopup">
        <view class="jk-popup-head">
            <view class="jk-popup-head-item" @click="onClosePopup">{{ closeText }}</view>
            <view class="jk-popup-head-item jk-popup-head-title">{{ title }}</view>
            <view class="jk-popup-head-item jk-popup-head-item-confirm">
                <view @click="onConfirmSelectMachineBtn">确认</view>
            </view>
        </view>
        <view class="jk-popup-content">
            <view v-model="selectVal">
                <view style="max-height: 400px;overflow: auto;">
                    <view
                        v-for="(item, index) in cpOptionData"
                        :key="index"
                        :label="item[optionLabelKeyName]"
                        :name="item[optionIdKeyName]"
                        hover-class="hover-class"
                        style="height: 84rpx;border-bottom: solid 1rpx #e8eaec;display: flex;align-items: center;justify-content: space-between;padding: 0 32rpx;font-size: 28rpx;color: #17233d;"
                        @click="onSelect(item[optionIdKeyName])"
                    >
                        <text>{{ item[optionLabelKeyName] }}</text>
                        <u-icon v-if="item[optionIdKeyName] === selectVal" name="checkbox-mark" size="24" color="#2d8cf0"></u-icon>
                    </view>
                </view>
                <view class="confirm-box">
                    <u-button @click="onConfirmSelectMachineBtn" type="primary" size="large">确认</u-button>
                </view>
            </view>
        </view>
    </u-popup>
</template>
<script>
    export default {
        props: {
            value: {
                type: [Number, String],
                default: ''
            },
            show: {
                type: Boolean,
                default: false
            },
            closeOnClickOverlay: {
                type: Boolean,
                default: true
            },
            showAll: {  // 是否显示"全部"选项
                type: Boolean,
                default: true
            },
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            },
            optionIdKeyName: {
                type: String,
                default: 'id'
            },
            optionLabelKeyName: {
                type: String,
                default: 'name'
            },
            title: {
                type: [String, Number],
                default: ''
            },
            closeText: {
                type: [String],
                default: '关闭'
            },
            showClear: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                cpOptionData: [],
                selectVal: null,
                showSelectMachinePopup: false
            };
        },
        methods: {
            onSelect(e) {
                this.selectVal = e;
            },
            onClearPopup() {
                this.$emit('clear');
            },
            onConfirmSelectMachineBtn() {
                if (this.selectVal || this.selectVal === 0) {
                    let item = {};
                    // -1 表示查看全部，需要传""给后端  { id: '-1', name: '全部' }
                    if (Number(this.selectVal) === -1) {
                        item[this.optionIdKeyName] = '';
                        item[this.optionLabelKeyName] = '';
                    } else {
                        item = this.optionList.find(x => x[this.optionIdKeyName] === this.selectVal) || {};
                    }
                    this.$emit('confirm', this.selectVal, item);
                    this.$emit('visible-change', false);
                } else {
                    uni.showToast({
                        title: '请选择',
                        icon: 'error'
                    });
                }
            },
            onClosePopup() {
                this.$emit('visible-change', false);
            },
            onSelectMachinePopup() {
                this.selectVal = null;
                this.$emit('visible-change', false);
            },
            getOptionData() {
                if (this.value) this.selectVal = this.value;
                this.cpOptionData = this.optionList ? JSON.parse(JSON.stringify(this.optionList)).filter(x => Number(x[this.optionIdKeyName]) !== -1) : [];
                if (this.showAll) {
                    this.cpOptionData.unshift({
                        [this.optionIdKeyName]: -1,
                        [this.optionLabelKeyName]: '全部'
                    })
                }
            },
        },
        watch: {
            show(newVal) {
                if (!newVal) {
                    this.selectVal = null;
                } else {
                    this.getOptionData();
                }
                this.showSelectMachinePopup = newVal;
            }
        }
    }
</script>
<style scoped lang="scss">
.confirm-box {
    padding: 24rpx 32rpx;
}
.hover-class {
    background: #f8f8f9;
}
.jk-popup-head {
    height: 88rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    border-bottom: solid 1rpx #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-bottom: 20rpx;
    .jk-popup-head-item-confirm {
        text-align: right;
    }
    .jk-popup-head-item {
        font-size: 28rpx;
        width: calc(100% / 3);
    }
    .jk-popup-head-title {
        height: 100%;
        font-size: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.jk-popup-content {
    padding: 0;
}
</style>
